<template>
  <div class="bar" ref="barRef"></div>
</template>
<script setup>
import { ref } from "vue";
import useCharts from "@/hooks/useCharts";
let barRef = ref();

let baseOptions = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  grid: {
    top: "5%",
    left: "2%",
    right: "2%",
    bottom: "0%",
    containLabel: true,
  },
  legend: {
    show: true,
    right: "0%",
    top: "0%",
    textStyle: {
      color: "#fff",
      fontSize: 10,
    },
    data: ["OK", "NG"],
  },
  calculable: true,
  xAxis: [
    {
      axisTick: {
        alignWithLabel: true,
      },
      axisLabel: {
        color: "#FFF",
      },
      axisLine: {
        color: "#fff",
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      data: ["9/20", "9/21", "9/22", "9/23", "9/24", "9/25", "9/26"],
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        color: "#CCC",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
    },
  ],
  series: [
    {
      name: "OK",
      type: "bar",
      stack: "总量",
      barWidth: "30%",
      label: {
        show: true, //开启显示
        position: "inside", //在上方显示
        color: "#fff",
      },
      itemStyle: {
        color: "#0f0",
      },
      data: [50, 60, 40, 80, 60, 70, 80],
    },

    {
      name: "NG",
      type: "bar",
      stack: "总量",
      barWidth: "30%",
      label: {
        show: true, //开启显示
        position: "inside", //在上方显示
        color: "#fff",
      },
      itemStyle: {
        color: "#f00",
      },
      data: [10, 8, 6, 7, 9, 5, 3],
    },
  ],
};

let { updateDraw } = useCharts(barRef, baseOptions);
</script>
<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
